<template>
    <div class="myTable">
        <head-top></head-top>
        <!-- 条件查询表单 -->
        <div id="queryForm">
            <el-form :inline="true" :model="courseQuery">
                <el-form-item>
                    <el-col :span="6">
                        <el-select v-model="courseQuery.coursetypeid" placeholder="请选择课程分类">
                            <el-option v-for="type in courseTypes" :key="type.id" :value="type.id"
                                :label="type.name"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-col :span="20">
                        <el-input v-model="courseQuery.name" placeholder="请输入课程名" style="width: 200px;"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="querySelect"><i class="el-icon-search"></i> 查询</el-button>
                    <el-button type="danger" @click="resetForm"><i class="el-icon-delete"></i> 清空</el-button>
                    <el-button type="primary" @click="addResetCourseForm"><i class="el-icon-plus"> 增加</i> </el-button>
                    <el-button type="primary" @click="addResetCourseTypeForm"><i class="el-icon-plus"> 课程分类</i></el-button>
                    <el-button type="primary" @click="editResetCourseTypeForm"><i class="el-icon-search">
                            课程分类</i></el-button>
                    &nbsp;&nbsp;
                    <!-- <el-upload ref="upload" style="display: inline-block" accept=".xls,.xlsx"
            action="http://localhost:9000/main/user/upload" :show-file-list="false" :auto-upload="true" :multiple="false"
            :before-upload="beforeUpload" :on-success="uploadSuccess">
            <el-button type="primary"><i class="el-icon-upload"></i> 导入</el-button>
          </el-upload>
          &nbsp;&nbsp;
          <el-button type="primary" @click="exportFile"><i class="el-icon-download"></i> 导出
          </el-button>
          <el-button type="primary">
            <a :href="'https://project-edu-service.oss-cn-beijing.aliyuncs.com/user.xls'"
              style="color: #fff; text-decoration: none">模版</a>
            <i class="el-icon-download el-icon--right"></i>
          </el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <!-- 数据表格 -->
        <div class="table_container">
            <el-table :data="courseList" border style="width: 100%" class="courseTable">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand" align="left">
                            <el-form-item label="课程简介">
                                <span>{{ props.row.introduction }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="序号" width="70" align="center">
                    <template scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column label="课程编号" prop="id" align="center"></el-table-column>
                <el-table-column label="课程分类" prop="coursetype.name" align="center" sortable></el-table-column>
                <el-table-column label="课程名" prop="name" align="center"></el-table-column>
                <el-table-column label="课程阶段" prop="stage" align="center"></el-table-column>
                <el-table-column label="发布时间" prop="insertTime" align="center"></el-table-column>
                <el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column>
                <el-table-column label="操作" prop="cope" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success">详情</el-button>
                        <el-button size="mini" type="primary" @click="editCourse(scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteCourse(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20, 30, 50, 100]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 课程修改、添加弹出框 -->
        <el-dialog title="课程添加和编辑" :visible.sync="dialogFormVisible" style="width: 800px; margin: 0 auto;">
            <el-form :model="course" label-width="100px">
                <el-form-item label="课程编号">
                    <el-input v-model="course.id" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="课程分类">
                    <el-select v-model="course.coursetypeid">
                        <el-option v-for="type in courseTypes" :key="type.id" :value="type.id" :label="type.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名称">
                    <el-input v-model="course.name" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="课程阶段">
                    <el-select v-model="course.stage">
                        <el-option v-for="i in 10" :key="i" :value="i" :label="i"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateCourse">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 课程分类修改、添加弹出框 -->
        <el-dialog title="课程分类添加和编辑" :visible.sync="dialogFormVisible2" style="width: 800px; margin: 0 auto;">
            <el-form :model="courseType" label-width="100px">
                <el-form-item label="课程分类ID" hidden>
                    <el-input v-model="courseType.id" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="课程分类名称">
                    <el-input v-model="courseType.name" style="width: 200px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateCourseType">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 课程分类列表弹出框 -->
        <el-dialog title="课程分类列表" :visible.sync="dialogFormVisible3" style="width: 1900px; margin: 0 auto;">
            <el-table :data="courseTypes" border>
                <el-table-column label="序号" width="70" align="center">
                    <template scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column property="id" label="ID" width="100" align="center"></el-table-column>
                <el-table-column property="name" label="名称" width="200" align="center"></el-table-column>
                <el-table-column property="insertTime" label="发布时间" width="200" align="center"></el-table-column>
                <el-table-column property="updateTime" label="更新时间" width="200" align="center"></el-table-column>
                <el-table-column label="操作" prop="cope" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editCourseType(scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteCourseType(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>

import headTop from '../../components/headTop.vue'
import axios from 'axios';
export default {
    data() {
        return {
            courseQuery: {},  // 条件查询表单绑定数据
            course: {}, // 弹出框表单绑定数据
            courseType: {
                name: ""
            },
            courseTypes: [],  // 课程分类列表
            courseList: [],
            currentPage: 1,
            limit: 10,
            total: 20,
            dialogFormVisible: false,
            dialogFormVisible2: false,
            dialogFormVisible3: false
        }
    },

    created() {
        this.pageSelect(this.currentPage, this.limit);
        this.getCourseTypes();
    },

    components: {
        headTop,
    },
    methods: {
        // 打开课程分类编辑的对话框
        editCourseType(id) {
            this.dialogFormVisible2 = true;
            // 根据课程分类ID在 courseTypes 数组中找到对应的分类
            for (let i = 0; i < this.courseTypes.length; i++) {
                if (this.courseTypes[i].id == id) {
                    this.courseType = this.courseTypes[i];
                }
            }
        },
        // 删除课程分类
        deleteCourseType(id) {
            this.$confirm('此操作将永久删除该课程分类所有内容, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.delete(`http://114.116.52.2:8008/courseType/removeCourseTypeById/${id}`).then(res => {
                    let code = res.data.code;
                    if (code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getCourseTypes();
                        this.dialogFormVisible3 = false;
                    }
                })
            })
        },

        // 课程分类的增加或修改
        saveOrUpdateCourseType() {
            if (this.courseType.id) { // 课程分类的修改操作
                this.updateCourseType();
            } else { // 课程分类的增加操作
                this.addCourseType();
            }

        },

        // 打开课程分类列表的对话框
        editResetCourseTypeForm() {
            this.getCourseTypes();
            this.dialogFormVisible3 = true;
        },

        // 修改课程分类
        updateCourseType() {
            axios.put('http://localhost:9000/main/courseType/updateCourseTypeById', this.courseType).then(res => {
                let code = res.data.code;
                if (code == 200) {
                    this.$message({
                        type: 'success',
                        message: '修改课程分类成功!'
                    });
                    this.dialogFormVisible2 = false;
                    this.dialogFormVisible3 = false;
                    this.pageSelect(this.currentPage, this.limit);
                    this.getCourseTypes();
                } else {
                    this.$message.error('修改课程分类失败！');
                }
            })
        },
        // 添加课程分类
        addCourseType() {
            axios.post('http://localhost:9000/main/courseType/addCourseType', this.courseType).then(res => {
                let code = res.data.code;
                if (code == 200) {
                    this.$message({
                        type: 'success',
                        message: '添加课程分类成功!'
                    });
                    this.dialogFormVisible2 = false;
                } else {
                    this.$message.error('添加课程分类失败！');
                }
            })
        },

        // 课程分类对话框
        addResetCourseTypeForm() {
            this.courseType = {};
            this.dialogFormVisible2 = true;
        },

        saveOrUpdateCourse() {
            if (this.course.id) {  // 课程修改
                this.updateCourse();
            } else { // 课程添加
                this.addCourse();
            }
        },

        updateCourse() {
            axios.put(`http://localhost:9000/main/course/updateCourse`, this.course).then(res => {
                let code = res.data.code;
                if (code == 200) {
                    this.$message({
                        message: '恭喜你，修改课程成功！',
                        type: 'success'
                    });
                } else {
                    this.$message.error('修改课程失败！');
                }
                this.dialogFormVisible = false;
                this.pageSelect(this.currentPage, this.limit);
            });
        },
        // 添加课程
        addCourse() {
            axios.post(`http://localhost:9000/main/course/addCourse`, this.course).then(res => {
                let code = res.data.code;
                if (code == 200) {
                    this.$message({
                        message: '恭喜你，添加课程成功！',
                        type: 'success'
                    });
                } else {
                    this.$message.error('添加课程失败！');
                }
                this.dialogFormVisible = false;
                this.pageSelect(this.currentPage, this.limit);
            });
        },
        // 查询所有的课程分类
        getCourseTypes() {
            axios.get('http://localhost:9000/main/courseType/selectAll').then(res => {
                this.courseTypes = res.data.data.courseTypes;
            })
        },

        // 课程条件查询
        querySelect() {
            this.pageSelect(this.currentPage, this.limit);
        },

        // 分页查询课程
        pageSelect(current, limit) {
            axios.post(`http://localhost:9000/main/course/selectCourse/${current}/${limit}`, this.courseQuery).then(res => {
                this.courseList = res.data.data.rows;
                this.total = res.data.data.total;
            });
        },

        // 清空条件查询表单
        resetForm() {
            this.courseQuery = {};
            this.pageSelect(this.currentPage, this.limit);
        },
        // 添加课程前清空form表单
        addResetCourseForm() {
            this.dialogFormVisible = true;
            this.course = {};
        },
        // 修改课程信息前的数据回显
        editCourse(id) {
            this.dialogFormVisible = true;
            // 根据课程ID查询课程
            axios.get(`http://localhost:9000/main/course/selectCourseById/${id}`).then(res => {
                this.course = res.data.data.course;
            });
        },

        // 删除课程（根据课程ID）
        deleteCourse(id) {
            this.$confirm('此操作将永久删除该课程所有内容, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.delete(`http://localhost:9000/main/course/removeCourseById/${id}`).then(res => {
                    let code = res.data.code;
                    if (code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.pageSelect(this.currentPage, this.limit);
                    }
                })
            })
        },
        // 每页记录数发生变化
        handleSizeChange(val) {
            this.limit = val;
            this.pageSelect(1, this.limit);
        },
        // 当前页发生变化
        handleCurrentChange(val) {
            this.currentPage = val;
            this.pageSelect(this.currentPage, this.limit);
        }
    },
}
</script>

<style>
.myTable {
    width: 98%;
    height: 850px;
    margin: 10px auto;
    text-align: center;
    overflow: hidden scroll;
}

.block {
    width: 100%;
    margin: 15px auto;
}

#queryForm {
    float: left;
    width: 100%;
    height: auto;
    text-align: left;
    padding: 20px 0 0 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

#queryForm .el-input {
    width: 150px;
}
</style>